
var obj={
    enter:function(smallElem,bigElem,toolElem){
        smallElem.addEventListener('mouseenter', function () {
            bigElem.style.display = 'inline-block';
            toolElem.style.display = 'block';
        });
    },
    leave:function(smallElem,bigElem,toolElem){
        smallElem.addEventListener('mouseleave', function () {
            bigElem.style.display = 'none';
            toolElem.style.display = 'none';
        })
    },
    move:function(smallElem,bigElem,toolElem){
        var offX = toolElem.offsetLeft + smallElem.offsetLeft, offY = toolElem.offsetTop + smallElem.offsetTop;
        var smallWidth=smallElem.clientWidth,
            smallHeight=smallElem.clientHeight,
            bigWidth=bigElem.clientWidth,
            bigHeight=bigElem.clientHeight,
            toolWidth=toolElem.clientWidth,
            toolHeigth=toolElem.clientHeight,
            diff,
            diffWidth,
            diffHeight,
            halfToolWidth,
            halfToolHeight
        ;
        diff=bigWidth/smallWidth;
        diffWidth=bigWidth-smallWidth;
        diffHeight=bigHeight-smallHeight;
        halfToolWidth=toolWidth/2;
        halfToolHeight=toolHeigth/2;

        smallElem.addEventListener('mousemove', function (e) {
            var toolx = 0, tooy = 0;
            var x = 0, y = 0;

            x = e.clientX - offX;
            toolx = e.clientX - offX;
            y = e.clientY - offY;
            tooy = e.clientY - offY;
            if (toolx > (smallWidth-halfToolWidth)) {
                toolx = smallWidth-halfToolWidth;
            } else if (toolx < halfToolWidth) {
                toolx = halfToolWidth;
            }
            if (tooy > (smallHeight-halfToolHeight)) {
                tooy = smallHeight-halfToolHeight;
            } else if (tooy < halfToolHeight) {
                tooy = halfToolHeight;
            }
            if (x < 0) {
                x = 0;
            } else if (x > smallWidth) {
                x = smallWidth;
            }
            if (y < 0) {
                y = 0;
            } else if (y > smallHeight) {
                y = smallHeight;
            }
            //工具区域
            toolElem.style.top = `${tooy}px`;
            toolElem.style.left = `${toolx}px`;

            //控制右侧的放大区域
            bigElem.style.backgroundPositionX = -((x * diff) > diffWidth ? diffWidth : (x * diff)) + 'px';
            bigElem.style.backgroundPositionY = -((y * diff) > diffHeight ? diffHeight : (y * diff)) + 'px';
        });
    },
    init:function(smallElem,bigElem,toolElem){
        //需要初始化的量
        //获取hover元素距离父元素的偏移量

        obj.enter(smallElem,bigElem,toolElem);
        obj.leave(smallElem,bigElem,toolElem);
        obj.move(smallElem,bigElem,toolElem);
    }
};

window.onload=function() {

    //获取初始化的变量
    var small = document.getElementsByClassName('small-box')[0];
    var big = document.getElementsByClassName('big-box')[0];
    var tool = document.getElementsByClassName('hover-box')[0];
    obj.init(small,big,tool);


};
